<template>
  <!--页面整体大框-->
  <div class="kuangjia">
    <!--第一部分搜索条件及按钮-->
    <div class="one" style="display: inline-block">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">

        <!--左半部分搜索条件 -->
        <div class="onr-left" style="display: inline-block">
          <!--时间选择器（起始日期） -->
          <el-form-item label="日期" prop="entryName" label-width="40px">
            <div class="block">
              <el-date-picker
                style="width: 70%"
                v-model="startTime"
                type="date"
                placeholder="起始日期">
              </el-date-picker>
            </div>
          </el-form-item>

          <!--班次选择（起始班次）
          <el-form-item label=" " prop="entryName" label-width="20px" style="margin-left: -7%">
            <el-select v-model="value3" placeholder="起始班次" style="display: inline-block;width: 50% ">
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.label"
                :value="item.value3">
              </el-option>
            </el-select>
          </el-form-item>-->
          <!--      <el-form-item label="~" label-width="10px" style="margin-left: -5%"></el-form-item>-->

          <!--时间选择器（结束日期） -->
          <el-form-item label=" ~ " prop="entryName" label-width="18px" style="margin-left: -8%">
            <div class="block">
              <el-date-picker
                style="width: 70%"
                v-model="endTime"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item>

          <!--班次选择（结束班次）
          <el-form-item label=" " prop="entryName" label-width="20px" style="margin-left: -7%">
            <el-select v-model="value4" placeholder="结束班次" style="display: inline-block;width: 50% ">
              <el-option
                v-for="item in options4"
                :key="item.value4"
                :label="item.label"
                :value="item.value4">
              </el-option>
            </el-select>
          </el-form-item>-->

          <!--部门选择-->
          <el-form-item label="部门" prop="entryName" label-width="40px" style="margin-left: -7%">
            <el-select v-model="queryParams.department" placeholder="选择部门" style="display: inline-block;width: 50%">
              <el-option
                v-for="dict in dict.type.yqg_department"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <!--右半部分（按钮）-->
        <div class="one-right">
          <el-row>
            <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
            <el-button size="small" @click="resetQuery">重置</el-button>
            <el-button type="success" size="small" @click="handleExport">导出</el-button>
          </el-row>
        </div>
      </el-form>
    </div>
    <!--第二部分：表格-->
    <div class="biao">
      <el-table
        :data="tableData"
        border
        align="center"

        style="width: 100%; height: 80%">

        <el-table-column
          align="center"
          prop="liushuihao"
          label="流水号"
          width="180">
        </el-table-column>

        <el-table-column
          align="center"
          prop="handBrand"
          label="手牌">
        </el-table-column>

        <el-table-column
          align="center"
          prop="department"
          label="部门">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yqg_department" :value="scope.row.department"></dict-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="barNumber"
          label="吧台">
        </el-table-column>

        <el-table-column
          align="center"
          prop="piaohao"
          label="票号">
        </el-table-column>

        <el-table-column
          align="center"
          prop="entryName"
          label="消费名称">
        </el-table-column>

        <el-table-column
          align="center"
          prop="unitPrice"
          label="单价">
        </el-table-column>

        <el-table-column
          align="center"
          prop="quantity"
          label="数量">
        </el-table-column>

        <el-table-column
          align="center"
          prop="totalAmount"
          label="金额">
        </el-table-column>

        <el-table-column
          align="center"
          prop="recordingTime"
          label="录单时间">
        </el-table-column>

        <el-table-column
          align="center"
          prop="chargebackProcessorName"
          label="退单处理人">
        </el-table-column>

        <el-table-column
          align="center"
          prop="chargebackTime"
          label="退单时间">
        </el-table-column>

        <el-table-column
          align="center"
          prop="reasonForChargeback"
          label="退单原因">
        </el-table-column>

      </el-table>
      <div style="background: #F8F8F9;width: 100%;height: 46px">
        <el-row>
          <el-col :span="6" ><div style="margin-top: 13px;margin-left: 300px">商品数量：</div></el-col>
          <el-col :span="6"><div style="margin-top: 13px;margin-right: 330px">{{ quantity }}个</div></el-col>
          <el-col :span="6"><div style="margin-top: 13px;margin-left: 300px">合计金额：</div></el-col>
          <el-col :span="6"><div style="margin-top: 13px;margin-right: 330px">{{ amount }}元</div></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {chargeback} from "@/api/module/lyx/chargeback";          //{}内是传的类,后面为js文件的路径

export default {
  name: "chargeback",
  dicts: ['yqg_consumption_details', 'yqg_department'],       //用到的字典，yqg_department为数据库表里的所有部门通用字段
  data() {
    return {
      // 合计
      amount: 0, // 总价格
      quantity: 0, // 总数量
      tableData: [],
      value3: '',
      value4: '',
      value5: '',
      startTime: '',
      endTime: '',
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        originalHand: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        handoverStatus: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: '1',          //查询条件为退单，1表示退单，0表示正常
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  methods: {
    // 表单重置，此处无用
    reset() {
      this.form = {
        liushuihao: null,
        handBrand: null,
        department: null,
        barNumber: null,
        piaohao: null,
        entryName: null,
        quantity: null,
        unitPrice: null,
        totalAmount: null,
        nickName: null,
        recordingTime: null,

      };
      this.queryParams.entryName = '';
      this.resetForm("form");
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      // this.handleQuery();

      this.amount = 0
      this.quantity = 0
      this.queryParams.department = ''     //重置部门
      this.startTime = ''                  //重置起始时间
      this.endTime = ''                    //重置终止时间
      this.tableData = []                  //重置表格内数据，表内是数组所以用[]
    },
    /** 查询基本信息列表 */
    getList() {
      if (this.startTime === '' || this.endTime === '' || this.startTime === null || this.endTime == null) {
        return
      }
      this.queryParams.note1 = this.startTime.getTime()     /** 将note1转换为起始时间 */
      this.queryParams.note2 = this.endTime.getTime()       /** 将note2转换为终止时间 */
      this.loading = true;                                  //下方都是固定的
      chargeback(this.queryParams).then(response => {       //chargeback要与上方的对应以及js文件对应
        this.tableData = response.rows;  /*数据传送到tableData rows表示行*/

        // 手动计算合计
        this.amount = 0
        this.quantity = 0
        console.log(this.tableData.length)
        for (let i = 0; i < this.tableData.length; i++) {
          this.quantity += parseInt(this.tableData[i].quantity)
          this.amount += parseInt(this.tableData[i].totalAmount)

         /* if (this.tableData[i].consumptionStatus === "1") {
            console.log(this.tableData[i].totalAmount)
            console.log(this.tableData[i])
          }*/
        }
        /*this.quantity = response.total;  /!*数据传送到tableData rows表示行*!/
        this.amount = response.total; */ /*数据传送到tableData rows表示行*/
        this.loading = false;           //初始状态设为false
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      if (this.startTime === '' || this.endTime === '' || this.startTime === null || this.endTime == null) {     /** 这里要走一遍判断，若均为空则返回空 */
        return
      }
      this.queryParams.note1 = this.startTime.getTime()
      this.queryParams.note2 = this.endTime.getTime()
      this.download('/project/lyx/chargeback/export', {      //改一下位置，其他不用改
        ...this.queryParams
      }, `退单_${new Date().getTime()}.xlsx`)       //导出表下载时的表名
    },

  }
}

</script>

<style scoped>
/*大框样式*/
.kuangjia {
  display: flex;
  flex-direction: column;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 1%;
}

/*搜索行样式*/

.one {
  display: inline-block;
  margin-top: 2%;
  height: 20%;
  width: 100%;
}

/* 日期选择框的宽度
::v-deep .el-input__inner{
 width: 50%;
}*/
/*时间里的图标
::v-deep .el-input__icon {
  line-height: 30px;
}
*/
.one-right {
  float: right;
  display: inline-block;
}

.biao {
  margin-top: 5px;
}

</style>
